<template>
  <div>
    <el-dialog
      title="客户积分流水"
      :visible.sync="dialogvisible"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="true"
      width="80%"
      :before-close="handleClose"
    >
      <div class="tableList">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="排序" width="50"></el-table-column>
          <el-table-column prop="relateOrderId" label="关联单据" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="accountType" label="账务类型" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
              {{scope.row.accountType==1?"收入":"支出"}}
            </template>
          </el-table-column>
          <el-table-column prop="businessType" label="业务类型" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
              {{businessTypes[scope.row.businessType]}}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="businessDay" label="交易日期" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get, postJson, postXform } from "@/utils/request.js";
export default {
  props: ["id", "visible"],
  watch: {
    id: function() {
      let that = this;
      if (that.id) {
        that.pageNum = 1; // 当前页数
        that.pageSize = 10;
        that.getList();
      }
    },
    visible: function() {
      let that = this;
      that.dialogvisible=this.visible;
      
    }
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表

      businessTypes: {
        1: "注册积分",
        2: "转介绍送一次积分",
        3: "消费会员积分",
        4: "订单购物抵扣"
      },
      dialogvisible:false,
    };
  },
  created() {
  },
  computed: {},
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      get("/customer/pageCreditsflow", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        id:this.id
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });

        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    handleClose(done) {
        this.$emit("update:visible",false);
        done();
        console.log(this.visible);
    }
  }
};
</script>

<style lang="less">
</style>